﻿<!DOCTYPE html>
<html lang="ko"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>전체 | 코드연습 | 다우기술 </title>
<meta name="keywords" content="html5, css3, javascript, jquery, mobileweb, 웹표준, 웹앱, 모바일웹, 제이쿼리, 자바스크립트, html, css, js, html5강좌, html5예제, css3강좌, css3예제, jquery강좌, jquery예제, html5자바스크립트, html5란, html5홈페이지, html5사이트, html5게임, html5태그, html5canvas, html5캔버스, htmlkorea, 코웹">
<script src="/${initParam.context_root}/js/jquery.min.js"></script>
<script src="/${initParam.context_root}/js/jquery.masonry.min.js"></script>
<link rel="stylesheet" href="/${initParam.context_root}/css/maincss.css">

<script type="text/javascript">
function openType1(){
	window.open("/${initParam.context_root}/typeOne.do","type1",
	"width=600px, height=480px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType2(){
	window.open("/${initParam.context_root}/searchUser.do","type2",
	"width=400px, height=460px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType3(){
	window.open("/${initParam.context_root}/typeThree2.do","type3_2",
	"width=800px, height=600px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType4(){
	window.open("/${initParam.context_root}/typeFour.do","type4",
	"width=300px, height=400px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType5(){
	window.open("/${initParam.context_root}/typeFive.do","type5",
	"width=430px, height=230px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType6(){
	window.open("/${initParam.context_root}/typeSix.do","type6",
	"width=700px, height=650px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType7(){
	window.open("/${initParam.context_root}/typeSeven.do","type7",
	"width=850px, height=300px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType8(){
	window.open("/${initParam.context_root}/typeEight.do","type8",
	"width=700px, height=800px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType9(){
	window.open("/${initParam.context_root}/typeNine.do","type9",
	"width=1120px, height=550px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType10(){
	window.open("/${initParam.context_root}/loginForm.do?accessType=typeTen","type10",
	"width=100px, height=300px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType11(){
	window.open("/${initParam.context_root}/typeEleven.do","type11",
	"width=300px, height=550px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType12(){
	window.open("/${initParam.context_root}/typeTwelve.do","type12",
	"width=700px, height=650px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType13(){
	window.open("/${initParam.context_root}/typeThirteen.do","type13",
	"width=700px, height=650px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType14(){
	window.open("/${initParam.context_root}/typeFourteen.do","type14",
	"width=700px, height=650px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
function openType15(){
	window.open("/${initParam.context_root}/typeFifteen.do","type15",
	"width=700px, height=650px,  menubar=no, status=yes, realzable=no, location=no, scrollbars=yes, toolbar=no, resizable=yes");
}
</script>

</head>
<body>
	<div id="header">
		<a href="#">
		<img class="logoimg" src="./img/home.png" alt="logo" title="처음으로" height="23" style="left: 10px; top: 3px" width="93"></a>
		<div id="center_nav">
			<ul>
				<li class="auto-style1">
				<img src="/${initParam.context_root}/img/codeimg_icon.png" alt="codedrill" title="코드연습" height="26" style="left: 12px; top: 2px" width="31"></li>
				<li><a href="#">
				<img src="/${initParam.context_root}/img/toolimg_icon.png" alt="toolkit" title="HTML5 준비" style="left: 12px; top: 2px" height="27" width="32"></a></li>
				<li><img src="/${initParam.context_root}/img/favimg_icon.png" alt="favorite site" title="즐겨찾기 준비"></li>
			</ul>
		</div>
		<!--<div id="main_btn" style="">▦ 분류보기</div>--><span style="">전체 (13) </span>
	</div>
	<div id="main_nav" style="display: none;">
		<!--<ul>
			<li id="menu_1">전체 ▦</li><li id="menu_2">HTML (7)</li><li id="menu_3">CSS (4)</li>
			<li id="menu_4">SCRIPT (6)</li><li id="menu_5">응용 (11)</li><li id="menu_6">기타 (4)</li>
		</ul>-->
	</div>
	<!--<img src="/${initParam.context_root}/img/type1.png" alt="Type1" onclick="openType1()" style="cursor: pointer;">-->
	<div id="main_info" class="masonry" style="width: 950px; position: relative; height: 2992px;">
		<a href="#"><div class="contents artapp con_css_background masonry-brick" style="position: absolute; top: 0px; left: 0px;">
			<span>Text입력,자료업로드 구현하기<br></span>&nbsp;<img src="/${initParam.context_root}/img/A01.png" onclick="openType1()" alt="응용" style="left: 7px; top: 45px">
		</div></a>	
		
		<a href="#"><div class="contents artscript con_css_background masonry-brick" style="position: absolute; top: 0px; left: 312px;">
			<span>Type2 : 회원관리 및 엑셀 출력<br></span>&nbsp;<img src="/${initParam.context_root}/img/A02.png" alt="응용" onclick="openType2()" style="left: 7px; top: 45px">
		</div></a>	
		
		<a href="#"><div class="contents artcss con_css_background masonry-brick" style="position: absolute; top: 0px; left: 624px;">
			<span>Tree & 게시판 연계 구현하기<br></span>&nbsp;<img src="/${initParam.context_root}/img/A03.png" onclick="openType3()" alt="CSS">
		</div></a>	
		
		<a href="#"><div class="contents artapp con_css_background masonry-brick" style="position: absolute; top: 272px; left: 0px;">
			<span>Tab을 이용한 CRUD구현하기<br></span>		<img src="/${initParam.context_root}/img/A04.png" onclick="openType4()" alt="응용">
		</div></a>		
		
		<a href="#"><div class="contents artapp con_css_background masonry-brick" style="position: absolute; top: 272px; left: 312px;">
			<span>Type5: 다른기능으로 대체예정<br></span>
			<img src="#" alt="응용" onclick="openType5()">
			</div></a>
			
		<a href="#"><div class="contents artetc con_css_background masonry-brick" style="position: absolute; top: 272px; left: 624px;">
			<span>슬라이드 Tab 구현하기<br></span>	<img src="/${initParam.context_root}/img/A06.png" onclick="openType6()" alt="응용">
		</div></a>
		
		<a href="#"><div class="contents artapp con_css_background masonry-brick" style="position: absolute; top: 544px; left: 0px;">
			<span>배너관리기능 구현하기<br></span>	<img src="/${initParam.context_root}/img/A07.png" onclick="openType7()" alt="응용">
		</div></a>
		
		<a href="#"><div class="contents artapp con_css_background masonry-brick" style="position: absolute; top: 544px; left: 312px;">
			<span>메모기능 구현하기<br></span>	<img src="/${initParam.context_root}/img/A08.png" onclick="openType8()" alt="응용">
		</div></a>
		
		<a href="#"><div class="contents artapp con_css_background masonry-brick" style="position: absolute; top: 544px; left: 624px;">
			<span>게시판 생성기능 구현하기<br></span><img src="/${initParam.context_root}/img/A09.png" onclick="openType9()" alt="응용">
		</div></a>
		
		<a href="#"><div class="contents arthtml con_css_background masonry-brick" style="position: absolute; top: 816px; left: 0px;">
			<span>사내메일기능 구현하기<br></span>	<img src="/${initParam.context_root}/img/A10.png" onclick="openType10()" alt="응용">
		</div></a>
		
		<a href="#"><div class="contents artscript con_css_background masonry-brick" style="position: absolute; top: 816px; left: 312px;">
			<span>일정관리(ajax,json처리) 구현하기<br></span>	<img src="/${initParam.context_root}/img/A11.png" onclick="openType11()" alt="응용">
		</div></a>
		
		<a href="#"><div class="contents arthtml con_css_background masonry-brick" style="position: absolute; top: 816px; left: 624px;">
			<span>Type12: 그래프,챠트기능<br></span>
			<img src="#" alt="응용" onclick="openType14()" style="left: 7px; top: 45px">
		</div></a>
		
		
		<a href="#"><div class="contents arthtml con_css_background masonry-brick" style="position: absolute; top: 1088px; left: 0px;">
			<span>Type13 : JQuery, Spring, DB을 연동한 관계도 구현하기</span>
			<img src="/${initParam.context_root}/img/A13.png" onclick="openType13()" alt="응용">
		</div></a>
		
		<a href="/${initParam.context_root }/searchQuery.do"><div class="contents artscript con_css_background masonry-brick" style="position: absolute; top: 1088px; left: 624px;">
			<span>쿼리프로그램(QueryProgram)<br></span>	<img src="/${initParam.context_root}/img/A14.png" alt="응용">
		</div></a>
		
		<div class="contents arrow_up masonry-brick" style="position: absolute; top: 1088px; left: 624px;"></div>
	</div>
	<div class="clearSpace"></div>

<script src="/${initParam.context_root}/js/conjs.js"></script>

</body></html>